<template>
  <div class="page-bd" v-if="signedPark">
    <!-- <div class="search">
      <el-input placeholder="请输入停车场名称" @input="filterParkList">
        <template slot="prepend"
          ><span>停车场</span>
        </template>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div> -->

    <div class="form-content">
      <el-form
        label-width="0"
        size="medium"
        :model="formData"
        :rules="rules"
        ref="formData"
        label-position="left"
        status-icon
        class="choose-parking-protocol-form"
      >
        <el-form-item label="" prop="checkedParkIds">
          <el-checkbox-group v-model="formData.checkedParkIds" @change="handleCheckedChange">
            <el-checkbox v-for="parkItem in signedPark.parkList" :label="parkItem.id" :key="parkItem.id">{{
              parkItem.name
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
        >全选 <span class="checked-tips">已选择{{ formData.checkedParkIds.length }}个停车场</span></el-checkbox
      >

      <div class="action-box">
        <el-button type="primary" size="medium" @click="submitForm('formData')"
          >下一步<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['oldCheckedIds'],
  data() {
    return {
      formData: { checkedParkIds: [] },
      rules: {
        checkedParkIds: [{ type: 'array', required: true, message: '请至少选择一个停车场', trigger: 'change' }]
      },
      checkAll: false,
      isIndeterminate: false,
      signedPark: null,
      parkAllIds: [],
      originData: null
    };
  },
  created() {
    this.formData.checkedParkIds = this.oldCheckedIds;
    this.fetchUnsignedParkList();
  },
  watch:{
    parkAllIds : function(){
      this.$nextTick(function () {
        this.handleCheckAllChange(true)
        this.checkAll = true
      })
    }
  },
  methods: {
    filterParkList(val) {
      if (!val) {
        this.signedPark.parkList = this.originData.parkList;
      }
      this.signedPark.parkList = this.originData.parkList.filter(item => item.name.indexOf(val) !== -1);
    },
    fetchUnsignedParkList() {
      API.fetchGet('/valueAdded/getUnsignedParkList.do').then(res => {
        this.signedPark = res.data;
        this.originData = JSON.parse(JSON.stringify(res.data));
        this.parkAllIds = this.signedPark.parkList.map(item => item.id);
        //只有一个签约主体时候直接跳下一步
        if(this.parkAllIds && this.parkAllIds.length == 1){
          this.$parent.goNextStep()
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit('setFormData', 'checkedParkIds', this.formData.checkedParkIds);
          this.$emit('goNextStep');
        } else {
          return false;
        }
      });
    },
    handleCheckAllChange(val) {
      this.formData.checkedParkIds = val ? this.parkAllIds : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.signedPark.parkList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.signedPark.parkList.length;
    }
  }
};
</script>

<style lang="less" scoped>
.search {
  width: 300px;
}

// .form-content {
//   padding-top: 30px;
// }

.checked-tips {
  font-size: 14px;
  color: #999999;
  display: inline-block;
  margin-left: 20px;
}

.action-box {
  margin-top: 40px;
}
</style>
